<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        /*1. jq对象.each(callback)
            1. 语法：
                jquery对象.each(function(index,element){});
                * index:就是元素在集合中的索引
                * element：就是集合中的每一个元素对象

                * this：集合中的每一个元素对象
            2. 回调函数返回值：
                * true:如果当前function返回为false，则结束循环(break)。
                * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
        2. $.each(object, [callback])
        3. for..of: jquery 3.0 版本之后提供的方式
        for(元素对象 of 容器对象)*/

        //遍历1.1
        // $(function () {
        //     var citys = $("#city>li");
        //     citys.each(function () {
        //         alert(this.innerHTML);//可转换为jq对象,调用html();
        //     })
        // })
        // //遍历1.2
        // $(function () {
        //     var citys = $("#city>li");
        //     citys.each(function (index,element) {
        //         alert(index+":"+element.innerHTML)
        //     })
        // })
        //遍历1.3
        // $(function () {
        //     var citys = $("#city>li");
        //     $.each(citys,function () {
        //         //内容同上
        //         alert(this.innerHTML);
        //     })
        // })
        //for  of 方式遍历
        $(function () {
            var citys = $("#city>li");
            for (li of citys){
                alert($(li).html())
            }
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>
